{% extends 'base_dashboard.html' %}

{% block title %}My Profile — Online LMS{% endblock %}

{% block extra_css %}
<style>
  .prof-sidebar { border-radius:.875rem; overflow:hidden; border:0; }
  .prof-sidebar .ps-header {
    background:linear-gradient(135deg,#1a56db,#0e3fa8);
    padding:2rem 1.5rem 1.5rem; text-align:center; color:#fff; position:relative; overflow:hidden;
  }
  .prof-sidebar .ps-header::before {
    content:''; position:absolute; width:160px; height:160px; border-radius:50%;
    background:rgba(255,255,255,.06); top:-50px; right:-40px;
  }
  .prof-sidebar .ps-header::after {
    content:''; position:absolute; width:100px; height:100px; border-radius:50%;
    background:rgba(255,255,255,.05); bottom:-30px; left:-20px;
  }
  .prof-sidebar .ps-avatar { width:88px; height:88px; border:3px solid rgba(255,255,255,.4); object-fit:cover; position:relative; z-index:1; }
  .prof-sidebar .ps-avatar-ph {
    width:88px; height:88px; background:rgba(255,255,255,.15);
    border:3px solid rgba(255,255,255,.3); font-size:2.5rem; color:#fff; position:relative; z-index:1;
  }
  .prof-sidebar .ps-body { padding:1.25rem 1.5rem; background:#fff; }
  .prof-sidebar .ps-row {
    display:flex; align-items:center; gap:.5rem;
    padding:.5rem 0; font-size:.82rem; color:#6b7280; border-bottom:1px solid #f3f4f6;
  }
  .prof-sidebar .ps-row:last-child { border-bottom:0; }
  .pf-section-title {
    font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:#1a56db;
    display:flex; align-items:center; gap:.5rem; margin-bottom:1rem;
  }
  .pf-section-title::after { content:''; flex:1; height:1px; background:#e5e7eb; }
</style>
{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-start mb-4">
    <div>
        <h4 class="fw-bold mb-1">My Profile</h4>
        <p class="text-muted small mb-0">Update your account information &amp; preferences</p>
    </div>
</div>

<div class="row g-4">
    <!-- Sidebar card -->
    <div class="col-lg-4">
        <div class="card prof-sidebar shadow-sm h-100">
            <div class="ps-header">
                {% if user.profile_picture %}
                    <img src="{{ user.profile_picture.url }}" class="rounded-circle ps-avatar mx-auto d-block mb-3" alt="Profile">
                {% else %}
                    <div class="rounded-circle ps-avatar-ph mx-auto d-flex align-items-center justify-content-center mb-3">
                        <i class="bi bi-person-fill"></i>
                    </div>
                {% endif %}
                <h5 class="fw-bold mb-1" style="position:relative;z-index:1;">{{ user.get_display_name }}</h5>
                <span class="badge mb-1" style="background:rgba(255,255,255,.2);color:#fff;font-size:.78rem;position:relative;z-index:1;">
                    {{ user.get_role_display }}
                </span>
                <div style="font-size:.8rem;opacity:.75;position:relative;z-index:1;">@{{ user.username }}</div>
            </div>
            <div class="ps-body">
                {% if user.email %}
                <div class="ps-row"><i class="bi bi-envelope text-primary" style="font-size:.85rem;"></i><span>{{ user.email }}</span></div>
                {% endif %}
                {% if user.phone_number %}
                <div class="ps-row"><i class="bi bi-telephone text-primary" style="font-size:.85rem;"></i><span>{{ user.phone_number }}</span></div>
                {% endif %}
                {% if user.cnic %}
                <div class="ps-row"><i class="bi bi-card-text text-primary" style="font-size:.85rem;"></i><span class="font-monospace">{{ user.cnic|slice:":5" }}-{{ user.cnic|slice:"5:12" }}-{{ user.cnic|slice:"12:" }}</span></div>
                {% endif %}
                {% if user.age %}
                <div class="ps-row"><i class="bi bi-person-badge text-primary" style="font-size:.85rem;"></i><span>Age {{ user.age }}</span></div>
                {% endif %}
                {% if user.qualification %}
                <div class="ps-row"><i class="bi bi-mortarboard text-primary" style="font-size:.85rem;"></i><span>{{ user.qualification }}</span></div>
                {% endif %}
                <div class="ps-row"><i class="bi bi-calendar3 text-primary" style="font-size:.85rem;"></i><span>Joined {{ user.date_joined|date:"M Y" }}</span></div>
                <div class="mt-3">
                    <a href="{% url 'accounts:change_password' %}" class="btn btn-sm btn-outline-primary w-100">
                        <i class="bi bi-key me-1"></i>Change password
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Edit form -->
    <div class="col-lg-8">
        <div class="card border-0 shadow-sm rounded-4">
            <div class="card-body p-4">
                {% include 'includes/messages.html' %}

                <form method="post" enctype="multipart/form-data" novalidate>
                    {% csrf_token %}

                    <!-- Personal Info -->
                    <div class="pf-section-title"><i class="bi bi-person-circle"></i>Personal Information</div>
                    <div class="row g-3 mb-4">
                        <div class="col-md-6">
                            <label class="form-label fw-medium small">Full Name</label>
                            {{ form.full_name }}
                            {% if form.full_name.errors %}<div class="text-danger small mt-1">{{ form.full_name.errors|join:", " }}</div>{% endif %}
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-medium small">Age <span class="text-muted fw-normal">(optional)</span></label>
                            {{ form.age }}
                            {% if form.age.errors %}<div class="text-danger small mt-1">{{ form.age.errors|join:", " }}</div>{% endif %}
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-medium small">Email</label>
                            {{ form.email }}
                            {% if form.email.errors %}<div class="text-danger small mt-1">{{ form.email.errors|join:", " }}</div>{% endif %}
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-medium small">Phone Number</label>
                            {{ form.phone_number }}
                            {% if form.phone_number.errors %}<div class="text-danger small mt-1">{{ form.phone_number.errors|join:", " }}</div>{% endif %}
                        </div>
                        <div class="col-12">
                            <label class="form-label fw-medium small">CNIC</label>
                            {{ form.cnic }}
                            {% if form.cnic.errors %}<div class="text-danger small mt-1">{{ form.cnic.errors|join:", " }}</div>{% endif %}
                            <div class="form-text small text-muted">13-digit National Identity Card (format: XXXXX-XXXXXXX-X)</div>
                        </div>
                    </div>

                    <!-- Education -->
                    <div class="pf-section-title"><i class="bi bi-mortarboard"></i>Education &amp; Experience</div>
                    <div class="row g-3 mb-4">
                        <div class="col-md-6">
                            <label class="form-label fw-medium small">Qualification</label>
                            {{ form.qualification }}
                            {% if form.qualification.errors %}<div class="text-danger small mt-1">{{ form.qualification.errors|join:", " }}</div>{% endif %}
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-medium small">Last Degree</label>
                            {{ form.last_degree }}
                            {% if form.last_degree.errors %}<div class="text-danger small mt-1">{{ form.last_degree.errors|join:", " }}</div>{% endif %}
                        </div>
                        <div class="col-12">
                            <label class="form-label fw-medium small">Work Experience</label>
                            {{ form.work_experience }}
                            {% if form.work_experience.errors %}<div class="text-danger small mt-1">{{ form.work_experience.errors|join:", " }}</div>{% endif %}
                        </div>
                    </div>

                    <!-- Reference -->
                    <div class="pf-section-title"><i class="bi bi-people"></i>Reference <span class="text-muted" style="font-size:.7rem;text-transform:none;letter-spacing:0;font-weight:500;">(optional)</span></div>
                    <div class="row g-3 mb-4">
                        <div class="col-md-6">
                            <label class="form-label fw-medium small">Reference Name</label>
                            {{ form.reference_name }}
                            {% if form.reference_name.errors %}<div class="text-danger small mt-1">{{ form.reference_name.errors|join:", " }}</div>{% endif %}
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-medium small">Reference Mobile</label>
                            {{ form.reference_mobile }}
                            {% if form.reference_mobile.errors %}<div class="text-danger small mt-1">{{ form.reference_mobile.errors|join:", " }}</div>{% endif %}
                        </div>
                    </div>

                    <!-- Bio & Photo -->
                    <div class="pf-section-title"><i class="bi bi-file-person"></i>Bio &amp; Photo</div>
                    <div class="row g-3 mb-4">
                        <div class="col-12">
                            <label class="form-label fw-medium small">Bio</label>
                            {{ form.bio }}
                            {% if form.bio.errors %}<div class="text-danger small mt-1">{{ form.bio.errors|join:", " }}</div>{% endif %}
                        </div>
                        <div class="col-12">
                            <label class="form-label fw-medium small">Profile Picture</label>
                            {% if user.profile_picture %}
                                <div class="mb-2">
                                    <img src="{{ user.profile_picture.url }}" class="rounded-circle border" width="60" height="60" style="object-fit:cover;" alt="Current photo">
                                    <span class="text-muted small ms-2">Current photo — upload a new one to replace</span>
                                </div>
                            {% endif %}
                            {{ form.profile_picture }}
                            {% if form.profile_picture.errors %}<div class="text-danger small mt-1">{{ form.profile_picture.errors|join:", " }}</div>{% endif %}
                        </div>
                    </div>

                    <div class="d-flex gap-2 pt-2 border-top flex-wrap">
                        <button type="submit" class="btn btn-primary px-4 fw-semibold">
                            <i class="bi bi-save me-2"></i>Save Changes
                        </button>
                        <a href="{% url 'accounts:change_password' %}" class="btn btn-outline-warning px-4">
                            <i class="bi bi-key me-2"></i>Change password
                        </a>
                        <a href="{% url 'dashboard:redirect' %}" class="btn btn-outline-secondary px-4">Cancel</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}